<template>
  <div class="nav">
    <div :class="{ active: navIndex === 0 }" @click="changeNav(0)">首页</div>
    <div :class="{ active: navIndex === 1 }" @click="changeNav(1)">任务</div>
    <div :class="{ active: navIndex === 2 }" @click="changeNav(2)">消息</div>
    <div :class="{ active: navIndex === 3 }" @click="changeNav(3)">
      租币商城
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const navIndex = ref<number>(0);
const changeNav = (index: number) => {
  navIndex.value = index;
  let path = "/";
  switch (index) {
    case 0:
      path = "/";
      break;
    case 1:
      path = "/task";
      break;
    case 2:
      path = "/message";
      break;
    case 3:
      path = "/store";
      break;
    default:
      path = "/";
      break;
  }
  router.push({
    path,
  });
};
</script>

<style lang="scss" scoped>
.nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 40px;
  position: fixed;
  bottom: 0px;
  border-top: #000 1px solid;
  background: #fff;
  .active {
    color: #64e1dd;
  }
}
</style>
